<template>
  <button class="red-button" :link="link">
    <slot>{{ text }}</slot>
  </button>
</template>
<script>
export default {
  name: "RedButton",
  props: {
    text: {
      type: String,
      default: "Red Button",
    },
    link: {
      type: String,
      default: "#",
    },
  },
};
</script>
<style scoped>
.red-button {
  color: white;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgb(109, 3, 3);
  padding: 10px 20px;
  height: 45px;
  width: 130px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: var(--dg-font-family);
  --ep-button-hover-bg-color: rgba(255, 0, 0, 0.81)
}
.red-button:hover{
  background-color: rgba(255, 0, 0, 0.81);
}

</style>